<!--
 * @Author: dengyl
 * @Date: 2022-01-11 19:51:35
 * @LastEditTime: 2022-07-25 21:23:21
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 新闻-列表组件
 * @FilePath: \seeyon\code\ctp-static-portal-front\src\components\news\components\list.vue
-->

<template>
  <div class="news-list pannel-list-wrapper " :style="themStyle" :class="columnsName ? columnsName == '技术交流' ? 'news-list-style' : '':''">
    <ul>
      <li v-for="(item, index) in visibleList" :key="index" :style="item.style" >
        <div class="list-left" >
          <!--标记-->
          <span
            class="frontIcon vportal"
            :class="item.style.sectionListFronIcon"
            v-if="rowList.includes('symbolNumber')"
          ></span>
          <template v-if="item.extText">
            <section v-for="(ext, i) in item.extText" :key="i" class="ib">
              <Tag :value="ext[0]" />
            </section>
          </template>
          <!--链接，跳转到新窗口-->
          <a
            target="_blank"
            :title="item.subject"
            :href="`${newsBasePath}${item.link}`"
            @click="setVisitedStyle"
            >{{ item.subject }}</a
          >
          <!--新闻图标-->
          <icon :item="item" />
        </div>
        <!--根据宽度判断显示哪些基本信息-->
        <div class="list-right">
          <span v-if="rowList.includes('publishDate')">
            <span>{{ item.createDate.split(' ')[0] }}</span>
          </span>
          <span v-if="rowList.includes('type')" :title="item.categoryLabel" class="name">
            <span>{{ item.categoryLabel }}</span>
          </span>
          <span
            v-if="rowList.includes('publishMember')"
            :title="`${item.publishMember ? item.publishMember + '/' : ''}${
              item.publishDepartment
            }`"
            class="name"
          >
            <span>{{
              `${item.publishMember ? item.publishMember + '/' : ''}${item.publishDepartment}`
            }}</span>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import Tag from './tag';
  import Icon from '../../common/newsTitleIcons.vue';
  import { rowList } from '@/mixins';
  import { getListCount } from '@/components/helper';
  import { methods } from '@/utils';
  export default {
    name: 'NewsList',
    components: {
      Tag,
      Icon
    },
    mixins: [rowList],
    props: {
      list: {
        type: Array,
        default: () => []
      },
      options: {
        type: Object,
        default: () => ({})
      },
      sectionStyle: {
        type: Object,
        default: () => ({})
      },
      path: {
        type: String
      },
      columnsName: {
        type: String
      },
      contentHeight: {
        type: Number
      }
    },
    data() {
      return {
        newsBasePath: `${_basePath}/`,
        count: 0
      };
    },
    computed: {
      // 计算出当前区域应展示数目
      visibleList() {
        let visibleList = this.list.slice(0, this.count);
        if (this.sectionStyle) {
          visibleList.forEach((item, index) => {
            item.style = {
              sectionListFronIcon: this.sectionStyle.sectionListFronIcon
            };
            if (index % 2 == 1) {
              item.style.backgroundColor = this.sectionStyle.sectionBodyDlBgc;
            }
            if (this.sectionStyle.sectionBodyLineBottomBoderDisplay == '1') {
              item.style[
                'borderBottom'
              ] = `1px solid ${this.sectionStyle.sectionBodyLineBottomBoderColor}`;
            }
          });
        }

        return visibleList;
      },
      themStyle() {
        let height = '100%';
        if (this.contentHeight) {
          height = this.contentHeight + 'px';
        }
        return {
          height,
          // backgroundColor: this.options.backgroundColor || this.sectionStyle.sectionBodyBgc,
          color: this.sectionStyle.sectionBodyColor,
          lineHeight: `${this.sectionStyle.sectionBodyLineHeight}px`,
          // backgroundImage: `url(${this.sectionStyle.sectionBodyBgi || ''})`,
          borderBottomLeftRadius: `${this.sectionStyle.sectionPanelBorderRadius}px`,
          borderBottomRightRadius: `${this.sectionStyle.sectionPanelBorderRadius}px`
        };
      }
    },
    created() {
      this.count = getListCount(
        this.contentHeight || methods.getContentHeight(this.options),
        this.sectionStyle?.sectionBodyLineHeight
      );
    },
    mounted() {
      console.log('this.columnsName :>> ', this.columnsName);
      console.log('sectionStyle: ', this.sectionStyle);
      console.log('list: ', this.list)
      console.log('options: ', this.options)
    },
    methods: {
      /**
       * @description: 给链接添加点击后状态
       */
      setVisitedStyle(e) {
        e.target.className.search('is-visited') == -1 && (e.target.className += 'is-visited');
      }
    }
  };
</script>
<style scoped lang="scss">
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .color-red {
    color: red;
  }

  .news-list {
    width: 100%;
    // padding: 10px;
    line-height: 32px;

    > ul {
      padding: 0;
      margin: 0;
      list-style: none;

      > li {
        position: relative;
        // padding: 5px 0;
        font-size: 14px;

        // > div {
        //     .vp-spot {
        //         color: #999;
        //     }
        //     // .list-symbol {
        //     //     display: inline-block;
        //     //     width: 5px;
        //     //     height: 5px;
        //     //     margin-right: 10px;
        //     //     background-color: #111;
        //     //     border: 1px solid #111;
        //     //     border-radius: 100%;
        //     // }
        // }

        > .list-right {
          position: absolute;
          top: 0;
          right: 0;
          width: 130px;
          overflow: hidden;
          font-size: 12px;
          color: #999;
          text-overflow: ellipsis;
          white-space: nowrap;
          justify-content: center;
          align-items: center;

          > .name {
            margin-left: 5px;
          }
        }

        > .list-left {
          margin-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          > div {
            display: inline-block;
          }

          > a {
            // color: #111;

            &:hover {
              color: #1890ff;
              cursor: pointer;
            }
          }

          .is-visited {
            color: rgba(107, 105, 105, 0.7);
          }
        }
      }
    }
  }

  .ib {
    display: inline-block;
  }
</style>
